<template>
  <p-drawer
    placement="right"
    :closable="false"
    width="calc(100vw - 200px)"
    :visible="visible"
    :mask-closable="false"
    :destroy-on-close="true"
    @close="onClose"
  >
    <TaskTitle icon-name="Edit" title-name="编辑线索" color="blue" />
    <div class="list-container">
      <p-tabs
        :animated="false"
        class="tabs-container"
        default-active-key="1"
        @change="callback"
      >
        <p-tab-pane key="1" tab="基本信息">
          <div class="list-main">
            <FormClueInfo ref="form" :form="form" />
            <BottomLine />
          </div>
        </p-tab-pane>
        <p-tab-pane key="2" tab="产品">
          <TableProduct :leads-no="detail.leadsNo" />
        </p-tab-pane>
        <p-tab-pane key="3" tab="联系人">
          <TableLinkman
            :leads-no="detail.leadsNo"
            :customer-code="detail.customerCode"
          />
        </p-tab-pane>
        <p-tab-pane key="4" tab="销售团队">
          <TableSaleTeam :leads-no="detail.leadsNo" />
        </p-tab-pane>
        <!-- <p-tab-pane key="5" tab="拜访记录">
          <TableCall :leads-no="detail.leadsNo" :detail="detail" />
        </p-tab-pane> -->
        <p-tab-pane key="5" tab="附件">
          <TableAccessory :leads-no="detail.leadsNo" />
        </p-tab-pane>
        <p-tab-pane key="6" tab="操作日志">
          <ProgressPortrait :operation-log="operationLogInformation" />
        </p-tab-pane>
      </p-tabs>
    </div>
    <ButtonGroup
      class="footer"
      :options="footerButtons"
      @click="handleButtonClick"
    />
  </p-drawer>
</template>

<script>
import {
  postClueSave,
  postClueCreate,
  postClueSubmit,
  getOperationLog,
} from '@/api/clue.js';
import DrawerMixin from './mixin';
import FormClueInfo from '@/components/task/FormClueInfo.vue';
import TableProduct from '@/components/task/TableProduct.vue';
import TableLinkman from '@/components/task/TableLinkman.vue';
import TableSaleTeam from '@/components/task/TableSaleTeam.vue';
// import TableCall from '@/components/task/TableCall.vue';
import TableAccessory from '@/components/task/TableAccessory.vue';
import ProgressPortrait from '@/components/task/ProgressPortrait.vue';

export default {
  components: {
    FormClueInfo,
    TableProduct,
    TableLinkman,
    TableSaleTeam,
    // TableCall,
    TableAccessory,
    ProgressPortrait,
  },
  mixins: [DrawerMixin],
  data() {
    return {
      form: {
        leadsNo: '',
        currStatus: '',
        leadsName: '',
        leadsSource: '',
        custItemName: '',
        custItemNo: '',
        custItemStep: '',
        itemDemandNum: '',
        expectPrice: '',
        expectCost: '',
        expectAmount: '',
        salesOrgCode: '',
        // salesGroupCode: '',
        // pmGroupCode: '',
        customerName: '',
        assessLevel: '',
        customerCode: '',
        appCategory: '',
        salesAreaName: '',
        sales: '无',
        pm: '无',
        remark: '',
        createUserId: '',
        createTime: '',
        updateTime: '',
        updateUserName: '',
        customerShortName: '',
        updateDeptId: '',
        createDeptId: '',
        updateDeptName: '',
        createDeptName: '',
        deptMgrUserId: '',
        salesGroup: {
          key: '',
          label: '',
        },
        pmGroup: {
          key: '',
          label: '',
        },
        salesOrg: {
          key: '',
          label: '',
        },
      },
      btnShow: true,
      disabled: false,
      operationLogInformation: [], //操作日志请求返回的信息
    };
  },

  computed: {
    footerButtons() {
      if (this.detail.currStatus === '5') {
        return [
          {
            key: 'submit',
            type: 'primary',
            label: '提交',
          },
          {
            key: 'close',
            label: '返回',
          },
        ];
      } else {
        return [
          {
            key: 'submit',
            type: 'primary',
            label: '提交',
          },
          {
            key: 'save',
            label: '保存',
            disabled: this.disabled,
          },
          {
            key: 'close',
            label: '返回',
          },
        ];
      }
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (!val) return;
        const clue = this.detail || {};
        this.form = {
          id: clue.id,
          leadsNo: clue.leadsNo || '',
          currStatus: clue.currStatus || '',
          leadsName: clue.leadsName || '',
          leadsSource: clue.leadsSource || '',
          custItemName: clue.custItemName || '',
          custItemNo: clue.custItemNo || '',
          custItemStep: clue.custItemStep || '',
          itemDemandNum: clue.itemDemandNum || '',
          expectPrice: clue.expectPrice || '',
          expectCost: clue.expectCost || '',
          expectAmount: clue.expectAmount || '',
          salesOrgCode: clue.salesOrgCode || '',
          // salesGroupCode: clue.salesGroupCode || '',
          // pmGroupCode: clue.pmGroupCode || '',
          customerName: clue.customerName || '',
          assessLevel: clue.assessLevel || '',
          appCategory: clue.appCategory || '',
          salesAreaName: clue.salesAreaName || '',
          salesName: clue.salesName || '无',
          pmName: clue.pmName || '无',
          remark: clue.remark || '',
          createUserName: clue.createUserName || '',
          createTime: clue.createTime || '',
          updateTime: clue.updateTime || '',
          createDeptName: clue.createDeptName || '',
          updateDeptName: clue.updateDeptName || '',
          updateUserName: clue.updateUserName || '',
          customerCode: clue.customerCode || '',
          customerShortName: clue.customerShortName || '',
          deptMgrUserId: clue.deptMgrUserId || '',
          salesGroup: {
            key: clue.salesGroupCode || '',
            label: clue.salesGroupName || '',
          },
          pmGroup: {
            key: clue.pmGroupCode || '',
            label: clue.pmGroupName || '',
          },
          salesOrg: {
            key: clue.salesOrgCode || '',
            label: clue.salesOrgName || '',
          },
        };
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    async callback(key) {
      key === '1' ? (this.disabled = false) : (this.disabled = true);
      if (key === '6') {
        const res = await getOperationLog('leads', this.detail.leadsNo);
        this.operationLogInformation = res.data.data;
      }
    },
    onClose() {
      this.$emit('update:visible', false);
      this.$emit('fresh');
    },
    async checkData() {},
    async submitData() {
      const valid = await this.$refs.form.validate();
      if (!valid) return new Promise(() => {});
    },
    // 提交
    async submitCallback() {
      await this.submitData();
      const res = await postClueSubmit({
        ...this.form,
        processId: this.processId,
        auditNo: this.detail.auditNo,
        pmGroupName: this.form.pmGroup?.label,
        pmGroupCode: this.form.pmGroup?.key,
        salesGroupCode: this.form.salesGroup?.key,
        salesGroupName: this.form.salesGroup?.label,
      });
      if (res.data.success) {
        await postClueCreate({
          bizModule: 'leads',
          currStatus: '2',
          id: this.processId,
          bizType: '1',
        });
        this.$message.success('提交成功！');
        this.closeCallback();
      } else {
        // await postClueCreate({
        //   bizModule: 'leads',
        //   currStatus: '0',
        //   id: this.processId,
        //   bizType: '1',
        // });
        this.$message.error('提交失败！');
      }
    },
    // 保存
    async saveCallback() {
      await this.submitData();
      const res = await postClueCreate({
        ...this.form,
        bizModule: 'leads',
        currStatus: '1',
        bizType: '1',
      });
      await postClueSave({
        ...this.form,
        processId: this.processId,
        pmGroupName: this.form.pmGroup.label,
        pmGroupCode: this.form.pmGroup.key,
        salesGroupCode: this.form.salesGroup.key,
        salesGroupName: this.form.salesGroup.label,
      });
      this.$message.success('保存成功！');
      this.closeCallback();
    },
    // 返回
    closeCallback() {
      this.onClose();
    },
    handleButtonClick(key) {
      const fn = `${key}Callback`;
      this[fn] && this[fn]();
    },
  },
};
</script>

<style lang="less" scoped>
.footer {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e5e6e9;
}
.list-container {
  height: calc(100% - 110px);
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  position: relative;
  box-sizing: border-box;
  padding: 10px 24px;
}
.list-main {
  height: calc(100% - 400px);
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px 24px;
}
/deep/ .poros-drawer-body {
  min-width: 1136px;
  height: 100%;
  padding: 0;
}
.progress-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.tabs-container {
  height: 100% !important;
  overflow-y: scroll;
}
</style>
